<template>
    <div class="common-size">
        <page-head :pageHead="pageHeadData"></page-head>
        <div class="sending-book-chart clear">
            <div ref="chartf" class="pie-chart left"></div>
            <table class="left pie-chart-desc">
                <tbody>
                <template v-for="(item,index) in descData">
                    <tr >
                        <td ><i v-bind:class="'i-'+(index+1) "></i></td>
                        <td>{{item.desc}}</td>
                    </tr>
                    <tr class="bottom">
                        <td></td>
                        <td><b>{{item.num}}</b>台，<b>{{item.percent}}%</b>，<b>{{item.amount}}万</b>元</td>
                    </tr>
                </template>

                </tbody>
            </table>
            <h2 class="charts_title">台账使用年限分析</h2>
        </div>
        <div class="sending-book-text">
            <div  v-html="item" v-for="(item, index) in textData"></div>
        </div>
        <page-footer :pageFooter="pageFooterData"></page-footer>
    </div>
</template>

<script>
    import { merge ,throttle} from "lodash"
    // 引入 ECharts 主模块
    let echarts = require('echarts/lib/echarts');
    // 引入柱状图
    require('echarts/lib/chart/pie');
    // 引入提示框和标题组件
    require('echarts/lib/component/tooltip');

    import pageHead from './pageHead.vue'
    import PageFooter from "./pageFooter.vue";
    import {nuxtMixins} from '../assets/javascript/mixin'

    export default {
        name: 'standing_book',
      props:['chartData'],
      mixins: [nuxtMixins],
        data(){
            return {
                getDefaultOptions: {
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    series: [{
                        name: '使用时长分布',
                        type: 'pie',
                        radius: ['60%', '75%'],
                        center: ['50%', '50%'],
                        clockwise: false,
                        labelLine: {
                            normal: {
                                show: false
                            }
                        },
                        itemStyle: {
                            normal: {
                                borderWidth: 4,
                                borderColor: '#FFF',
                            },
                            emphasis: {
                                borderWidth: 0,
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        },
                        label: {
                            normal: {
                                show:false
                            }
                        }
                    }]


                },
              pageTitle: '台账情况',
              detailTitle: '使用时长分布'
            }
        },
        computed:{
          textData () {
            return this.chartData.textData
          },
          descData () {
            return this.chartData.descData
          },
          oneRemarkData () {
            return this.chartData.remark
          }
        },
        methods: {
            updateDimensions(){
                this.chart.resize();
            },
            readyRenderLineChart(){
                if(!this.$props.chartData.chartData) return
                let chartData=this.$props.chartData.chartData;
                let linearColor = this.readyLinearColor;
                let learColor = [
                    {start:'#5a8cc4',end:'#98badf'},
                    {start:'#8fbb7c',end:'#adce9e'},
                    {start:'#f1ca2c',end:'#f7e291'},
                    {start:'#e5916d',end:'#efbf8f'},
                ]
                chartData.forEach((obj,index)=>{
                    obj['itemStyle'] = {
                        normal: {
                         color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 1,
                            y2: 1,
                            colorStops: [{
                                offset: 0, color: learColor[index].start // 0% 处的颜色
                            }, {
                                offset: 1, color: learColor[index].end // 100% 处的颜色
                            }]

                            }
                        }
                    }

                });
                this.getDefaultOptions.series[0]['data'] = chartData
                this.chart.setOption(this.getDefaultOptions);
            },
        },
        mounted: function () {
            this.chart = echarts.init(this.$refs.chartf)
            window.addEventListener("resize", throttle(this.updateDimensions));
            this.readyRenderLineChart()
        },
        components: {
          PageFooter,
          pageHead
        }


    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
    .sending-book-chart{
        height: auto;
        margin: 20px 35px 0 35px;
        position: relative;
        background: #ffffff;
        height: 470px;
        .pie-chart{
            width: 50%;
            height:460px;
        }
        .pie-chart-desc{
            margin: 100px 0 0 30px;
            >tbody{
                >tr{
                    >td{
                        color: #666;
                        >b{
                            color: #0A122D;
                        }
                        >i{
                            width: 10px;
                            height:10px;
                            display: inline-block;
                            border-radius: 10px;

                            &.i-1{
                                background: linear-gradient(to bottom, #4b8bc9, #91ecb4);
                            }
                            &.i-2{
                                background: linear-gradient(to bottom, #75c075, #a4d39b);
                            }
                            &.i-3{
                                background: linear-gradient(to bottom, #f1ca2c, #f7e291);
                            }
                            &.i-4{
                                background: linear-gradient(to bottom, #f18c64, #f6b883);
                            }
                        }
                    }
                    &.bottom{
                        >td{
                            padding-bottom: 10px;
                        }
                    }
                }
            }
        }
        >h2{
            width: 100%;
            text-align: center;
            position: absolute;
            bottom: 30px;
        }
    }

</style>
